<template>
  <header>
    <div class="site-topbar">
      <div class="site-topbar-b">
        <div class="topbar-b-c container">
          <div class="topbar-nav">
            <a class="logo-img" href="/home" :title="`${$t('platform')}`">
              <img :src="locale == 'en-US' ? enLogo : zhLogo" :alt="`${$t('platform')}`" />
            </a>
            <a
              :class="['menu-item', activePath == item.path ? 'active-menu-item' : '']"
              v-for="(item, index) in menuData"
              :key="item.title"
              :href="item.path"
              :title="item.title"
            >
              {{ $t("topbar")[index] }}
            </a>
          </div>
          <div class="right-menu">
            <el-dropdown trigger="click">
              <div class="avatar-wrapper">
                <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/language-black.png" />
                <span>{{ language == "English" ? "EN" : "中" }}</span>
                <i class="el-icon-arrow-down el-icon--right" style="color: #606266"></i>
              </div>
              <el-dropdown-menu slot="dropdown">
                <nuxt-link :to="{ path: $route.path }" exact v-for="item in options" :key="item.value" @click.native="changeLanguage(item.value)">
                  <el-dropdown-item>{{ item.label }}</el-dropdown-item>
                </nuxt-link>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="distance-height"></div>
  </header>
</template>

<script>
import { mapState, mapMutations } from "vuex"
export default {
  props: {},
  data() {
    return {
      activePath: "",
      zhLogo: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/logo.png",
      enLogo: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/logo-new-en.png",
      menuData: [
        { title: "首页", path: "/home" },
        { title: "二手设备", path: "/used-machine/excavator-47" },
        { title: "产品中心", path: "/products" },
        { title: "帮我找车", path: "/find-car" },
        { title: "新闻资讯", path: "/news" },
        { title: "关于云联", path: "/about-us" }
      ],
      language: "",
      options: [
        {
          value: "zh-CN",
          label: "中文"
        },
        {
          value: "en-US",
          label: "English"
        }
      ]
    }
  },
  mounted() {
    this.activePath = this.$route.path.includes("used-machine") ? "/used-machine/excavator-47" : this.$route.path
    this.showLanguage()
  },
  computed: { ...mapState(["locale"]) },
  components: {},
  watch: {
    $route(to, from) {
      this.activePath = to.path.includes("used-machine") ? "/used-machine/excavator-47" : to.path
    }
  },
  methods: {
    ...mapMutations(["SET_LANG"]),
    showLanguage() {
      console.log("get locale", this.locale)
      const currentLang = this.locale || "zh-CN"
      switch (currentLang) {
        case "zh-CN":
          this.language = "中文"
          break
        case "en-US":
          this.language = "English"
          break
      }
    },
    changeLanguage(value) {
      switch (value) {
        case "zh-CN":
          this.language = "中文"
          this.$i18n.locale = value //关键语句
          this.SET_LANG(value)
          this.$cookies.set("lang", value) //持久化存储
          location.reload() //重新加载当前页面
          break
        case "en-US":
          this.language = "English"
          this.$i18n.locale = value //关键语句
          this.SET_LANG(value)
          this.$cookies.set("lang", value) //持久化存储
          location.reload() //重新加载当前页面
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.site-topbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .site-topbar-b {
    height: 50px;
    background: #fff;
    border-bottom: 1px solid #efeff4;
    .topbar-b-c {
      display: flex;
      align-items: center;
      .topbar-nav {
        flex: 1;
        display: flex;
        align-items: center;
        .logo-img {
          margin-right: 60px;
          img {
            width: 278px;
            height: 30px;
          }
        }
        .menu-item {
          height: 50px;
          line-height: 50px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 18px;
          color: #333;
          margin-right: 40px;
          cursor: pointer;
        }
        .active-menu-item {
          position: relative;
          &::after {
            position: absolute;
            bottom: 8px;
            left: 50%;
            margin-left: -50%;
            content: "";
            height: 2px;
            width: 100%;
            background: #d71519;
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
          }
        }
      }
      .right-menu {
        &:focus {
          outline: none;
        }
        .avatar-wrapper {
          display: flex;
          align-items: center;
          cursor: pointer;
          img {
            width: 20px;
            height: 20px;
          }
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #606266;
            margin-left: 7px;
          }
        }
      }
    }
  }
}
.distance-height {
  width: 100%;
  height: 50px;
}
</style>
